<template>
  <div id="common-list">
      <main>
            <header class="search-goods">
                <i class="search iconfont">&#xe61d;</i>
                <input class="f14" placeholder="搜索更多商品"/>
            </header>
            <div v-if="goods.length > 0">
                <dl>
                    <dd v-for="good in goods" :key="good.index">
                      <common-list-sorts :goods="good" @setMoreSpecificatMounts="getMoreSpecification"></common-list-sorts>
                    </dd>
                </dl>
                <p class="f12 tc pt20 pb10" style="color: #A2A2A2">我们也是有底线的</p>
            </div>
            <div v-else class="pt10 tc f14" style="background: transparent;">您还未添加任何的常用的商品···</div>
      </main>
      <footer @click="popupVisible = true">
          <i-badge :count="goodsCounts">
            <view class="iconfont pl15" style="font-size: 28px;" :class="{iconfontActive:  goodsCounts > 0}">&#xe674;</view>
          </i-badge>
          <p class="f12">总计：<span>￥</span><span class="f18">{{ goods.totalPrice }}</span></p>
          <i-button type="success" @click="sureOrder" inline i-class="commonList-button">提交</i-button>
      </footer>
    <!--<mt-popup v-model="popupVisible" position="bottom" class="model" close-on-click-modal="model">
      <main>
        <header class="h50 tc f16 l">购买清单<i class="iconfont" @click="popupVisible = false">&#xe6e9;</i></header>
        <ul>
          <li v-for="good in goods" :key="good.index">
            <section v-for="guige in good.selectedGoods" :key="guige.key" v-if="guige.counts > 0">
              <aside>
                <p class="f16 pt5">{{guige.name}}</p>
                <p class="pt10"><span style="color: #F54727">￥<span class="f18">{{guige.price}}</span></span> <span class="pl5 f14">{{guige.guige}}</span></p>
              </aside>
              <add-decrsde-list :good="guige" @moreSpecificat="getMoreSpecificat"></add-decrsde-list>
            </section>
          </li>
          <p class="f12 tc pt5" style="color: #A2A2A2">我们也是有底线的</p>
        </ul>
      </main>
    </mt-popup>-->
  </div>
</template>

<script type="ECMAScript 6">
  import commonListSorts from '@/components/common-list-sorts';
  import addDecrsdeList from '@/components/add-decrsde-list';
  let datas = require('../../../../data');
    export default {
        name: 'common-list',
        components: {
          commonListSorts,
          addDecrsdeList
        },
        data () {
            return {
                value: '',
                goods: datas.goods,
                popupVisible: false,
                model: true,
                goodsCounts: 3
            };
        },
        watch: {
          goods: function () {
            this.getTotalPrice();
          }
        },
        methods: {
          getMoreSpecificat (index) {
            let totalPrice = 0;
            let goodsTatalPrice = 0;
            this.goods.forEach(good => {
              good.selectedGoods.forEach(guige => {
                if (guige.guige === index.guige && guige.name === index.name) {
                  this.$set(guige, 'counts', index.counts);
                }
                goodsTatalPrice += guige.price * guige.counts;
              });
              this.$set(good, 'goodsTotalPrice', goodsTatalPrice);
              goodsTatalPrice = 0;
              totalPrice += good.goodsTotalPrice;
            });
            this.$set(this.goods, 'totalPrice', totalPrice.toFixed(2));
          },
          getMoreSpecification (index) {
            let totalPrice = 0;
            this.goods.forEach(good => {
              if (good.id === index.id) {
                totalPrice += good.goodsTotalPrice;
              } else {
                totalPrice += good.goodsTotalPrice;
              }
            });
            this.$set(this.goods, 'totalPrice', totalPrice.toFixed(2));
          },
          getTotalPrice () {
            let totalPrice = 0;
            let goodsTotalPrice = 0;
            let prices = 0;
            this.goods.forEach(good => {
              prices = good.originalprice;
              if (good.selectedGoods.length > 0) {
                good.selectedGoods.forEach(guige => {
                  this.$set(guige, 'name', good.nam);
                  this.$set(guige, 'price', prices);
                  this.$set(guige, 'stock', good.stock);
                    if (guige.guige === good.selectGuige) {
                      this.$set(guige, 'counts', good.counts);
                    } else {
                      this.$set(guige, 'counts', 0);
                    }
                    goodsTotalPrice += guige.counts * guige.price;
                });
                this.$set(good, 'goodsTotalPrice', goodsTotalPrice);
                goodsTotalPrice = 0;
              }
              this.$set(this.goods, 'goodMounts', good.goodsMounts);
              totalPrice += good.goodsTotalPrice;
            });
            this.$set(this.goods, 'totalPrice', totalPrice.toFixed(2));
          },
          sureOrder () {
          }
        }
    };
</script>

<style lang="stylus" scoped>
    #common-list
        main
            padding-bottom 55px;
            .search-goods
                position fixed; top 0; width 100%; display flex; align-items center; height 40px; padding 0 13px; background #f3f4f6; z-index 100;
                .search
                    padding-right 15px; display inline-block; text-align center;font-size 20px;
                input
                    flex 1; padding-left 15px; line-height 18px; border-left   1px solid #DCDCDC;
            &>div
                background #fff; margin-top 40px;
                dl
                    padding 0 13px;
        footer
            position fixed; z-index 30000; bottom 0; display flex; align-items center; width 100%; height 50px; background #fff;border-top: 1px solid #E9E9E9;
            p
                flex 1; padding-left 20px; line-height 50px;
                &>span
                    color #F95318;
        .model
            main
               position relative; height 350px;border-radius: 15px 15px 0 0;background #fff;
               header
                 position relative; margin 0 13px; line-height 50px; font-weight 500;border-bottom: 1px dashed #E9E9E9;
                 &>i
                    position absolute; right 0;
               ul
                  padding 0 22px; max-height 300px;overflow hidden; overflow-y auto; padding-bottom 54px;
                  li
                      &>section
                         position relative; display flex;align-items center; height 66px; border-bottom: 1px dashed #E9E9E9;
    .iconfontActive
        color #41B962;
</style>
<style lang="stylus">
  .commonList-button
    margin 0!important; width 120px!important; height 50px!important; border-radius 0!important;
</style>
